import React,{useEffect} from 'react'
import './index.css'
import { useNavigate ,useParams,useSearchParams}from 'react-router-dom'
import { useState } from 'react'
// import { getdetail } from '../../../api/request'
import Swiper from 'swiper'
import './index.css'
import { Link } from 'react-router-dom'


export default function Details({detail}) {
    const [detaill,setDetaill]=useState([]) 
    const [search] = useSearchParams()
    const detailid= search.get('id') || ''
     
       
useEffect(()=>{
    let detaildataa= detail.filter((item)=>
    detailid ==   item.id
     )
     setDetaill(detaildataa)
},[detail])
useEffect(()=>{
    
    new Swiper('.btn-banners',{
        loop:true,
       autoplay:{
        delay:1000
       }
    })
},)
  return (
  

     <div className='detail'>  
    {
      console.log(detaill)
  }
         {/* {console.log(detail.price)} */}
        <span className='d-a'>
            <Link to='/shop'>
<i className='fa fa-chevron-left'></i>
            </Link>
        </span>
        <span className='d-b'>
            <i className='fa fa-ellipsis-h'></i>
        </span>
            
     <div className="btn-a btn-banners swiper-container">
            <div className="swiper-wrapper">
                {
                    
                    detaill.length !==0 ?    detaill[0].img.map((item)=>(
                        <div className="swiper-slide">
                           <img src={item} alt="" className='aimg'/>
                           </div>
                     )):''
                    
                    
                }
                     
                          {/* <div className="swiper-slide">
                           <img src='https://img.alicdn.com/imgextra/i3/2076907011/O1CN01aCXL1u21f5YhaXGZY_!!2076907011.jpg_430x430q90.jpg' alt="" className='aimg'/>
                           </div>
                           <div className="swiper-slide">
                           <img src='https://img.alicdn.com/imgextra/i4/2076907011/O1CN0120Otee21f5Z5kjyVe_!!2076907011.jpg_430x430q90.jpg' alt="" className='aimg'/>
                           </div>  */}
                           
                     
            </div>
        </div>
        <div className="detail-body">
            <div className='s-a'>
                 <span>￥
                <i>{detaill.length !==0 ? detaill[0].price:'' }</i>
            </span>
            <i className='fa fa-star-o'></i>
            </div>
            <div className='title'>
{detaill.length !==0 ? detaill[0].title:'' }
            </div>
            <div className='foota'>
                <span className='f-a'>
                    <i className='f-b fa fa-check'></i>     
                </span><p>包邮</p>
                <span className='f-a'>
                    <i className='f-b fa fa-check'></i>     
                </span><p>分期免息</p>
                <span className='f-a'>
                    <i className='f-b fa fa-check'></i>     
                </span><p>免费取退</p>
            <span className='f-c'><i className='fa fa-angle-right'></i></span>
            
            </div>
        </div>
        <div className="foot">
            <div className='foot-a'>
                <p>优惠</p>
                <div>
                  <span>3件9.5折</span>  
                </div>
                <span className='f-c'><i className='fa fa-angle-right'></i></span>
            </div>
            <div className='foot-a'>
            <p>已选</p>
                <div>
                  <p>81 白 原宿风满印半袖衬衫外套男装搭配痞帅ins风短袖衬衣男</p>  
                </div>
                <span className='f-c'><i className='fa fa-angle-right'></i></span>
            </div>
            <div className='foot-a'>
            <p>发货</p>
                <div >
                  <p>广东揭阳&nbsp;&nbsp;&nbsp;包邮</p>  
                </div>
                
            </div>
            </div>
<div className="detail-footer">
    <div className="detail-footer-a">
        <span><i className='fa fa-user-circle'></i></span>
        <p>店铺</p>
    </div>
    <div className="detail-footer-a">
        <span><i className='fa fa-headphones'></i></span>
        <p>客服</p>
    </div>
    <div className="detail-footer-a">
        <span><i className='fa fa-cart-plus'></i></span>
        <p>购物车</p>
    </div>
    <div className="detail-footer-b">
        加入购物车
    </div>
    <div className="detail-footer-b">
       领劵购买
    </div>
</div>
        
    </div>
  )
}
